<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="true"/>

    <title>Interact with your app</title>

    <link rel="stylesheet" href="../examples.css">

    <style>
      #editor {
        width: 100%
      }
    </style>

    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <script type="text/javascript" src="../../dist/iink.min.js"></script>
  </head>

  <body>
  <svg>
    <symbol id="icn-play" viewBox="0 0 16 16"><path d="M13.153 8.589c.606-.325.603-.854 0-1.178L4.873 2.97C4.392 2.709 4 2.945 4 3.496v9.008c0 .55.39.787.874.527l8.28-4.442z" fill="currentColor" fill-rule="evenodd"></path></symbol>
  </svg>
  <p id="question"></p>
  <div id="result"></div>
  <div id= 'nextDiv' class="nextOne"></div>

  <div>
    <nav>
      <div class="button-div">
        <button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
          <img src="../assets/img/undo.svg">
        </button>
        <button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
          <img src="../assets/img/redo.svg">
        </button>
      </div>
    </nav>
    <div id="editor" touch-action="none"></div>
  </div>
  <script>
    const nextButton = document.createElement('button');
    nextButton.id = 'nextButton';
    nextButton.classList.add('classic-btn');
    nextButton.innerHTML = 'Next question<svg class="icn"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="#icn-play"></use></svg>';

    const editorElement = document.getElementById('editor');
    const questionElement = document.getElementById('question');
    const resultElement = document.getElementById('result');
    const nextDivElement = document.getElementById('nextDiv');

    const undoElement = document.getElementById('undo');
    const redoElement = document.getElementById('redo');

    const countries = ['France', 'Italy', 'Spain', 'Argentina', 'Japan'];
    const capitals = ['Paris', 'Rome', 'Madrid', 'Buenos Aires', 'Tokyo'];

    let randomNumber = Math.floor(Math.random() * countries.length);

    questionElement.innerText = 'What is the capital of ' + countries[randomNumber] + '?';

    editorElement.addEventListener('changed', (event) => {
      undoElement.disabled = !event.detail.canUndo;
      redoElement.disabled = !event.detail.canRedo;
    });

    editorElement.addEventListener('exported', (evt) => {
      const exports = evt.detail.exports;
      if (exports && exports['text/plain']) {
        exportedIsAnswer(exports);
      } else {
        resultElement.innerHTML = '';
      }
    });

    nextButton.addEventListener('click', () => {
      changeQuestion();
    });
    undoElement.addEventListener('click', () => {
      editorElement.editor.undo();
    });
    redoElement.addEventListener('click', () => {
      editorElement.editor.redo();
    });

    function exportedIsAnswer(exports) {
      if (exports['text/plain'] === capitals[randomNumber]) {
        resultElement.innerHTML = '<span> Yes, it is ' + exports['text/plain'] + '.</span>';
        resultElement.style.cssText = "color: green;";
        nextDivElement.appendChild(nextButton);
      } else {
        resultElement.innerHTML = '<span> No, it is not ' + exports['text/plain'] + '.</span>';
        resultElement.style.cssText = "color: red;";
        nextDivElement.innerHTML = '';
      }
    }

    function changeQuestion() {
      countries.splice(randomNumber, 1);
      capitals.splice(randomNumber, 1);
      randomNumber = Math.floor(Math.random() * countries.length);
      questionElement.innerHTML = countries[randomNumber] ? 'What is the capital of ' + countries[randomNumber] + ' ?' : 'You won !';
      nextDivElement.innerHTML = '';
      editorElement.editor.clear();
      resultElement.innerHTML = '';
    }

    /**
     * Attach an editorElement.editor to the document
     * @param {Element} The DOM element to attach the ink paper
     * @param {Object} The recognition parameters
     */
    iink.register(editorElement, {
      recognitionParams: {
        type: 'TEXT',
        protocol: 'WEBSOCKET',
        server: {
          scheme: 'https',
          host: 'webdemoapi.myscript.com',
          applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
          hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad'
        },
        iink: {
          text: {
            mimeTypes: ['text/plain', 'application/vnd.myscript.jiix']
          },
        }
      }
    });

    window.addEventListener('resize', () => {
      editorElement.editor.resize();
    });
  </script>
  </body>

</html>